<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>销售记录管理</title>
    <link href="/css/modal.css" rel="stylesheet" />
    <style>
        .del{
            text-decoration:line-through;
        }
    </style>
</head>
<body>
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-title">
            销售记录列表
        </div>
        <div class="panel-body table-responsive">
            <table id="myTable" class="table display"></table>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">称重记录详情</h4>
            </div>
            <div class="modal-body">
                <!-- Start Row -->
                <div class="row">

                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="sellNumber" class="col-sm-3 control-label form-label">码单号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="sellNumber" v-model="sellNumber" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sellGoodsName" class="col-sm-3 control-label form-label">物品名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="sellGoodsName" v-model="sellGoodsName" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="customerName" class="col-sm-3 control-label form-label">客户名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="customerName" v-model="customerName" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="customerPhone" class="col-sm-3 control-label form-label">客户手机号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="customerPhone" v-model="customerPhone" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="warehouseName" class="col-sm-3 control-label form-label">仓库名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="warehouseName" v-model="warehouseName" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="licensePlate" class="col-sm-3 control-label form-label">车牌号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="licensePlate" v-model="licensePlate" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="grossWeight" class="col-sm-3 control-label form-label">毛重（吨）</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="grossWeight" v-model="grossWeight" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tareWeight" class="col-sm-3 control-label form-label">皮重（吨）</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="tareWeight" v-model="tareWeight" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="impurityWeight" class="col-sm-3 control-label form-label">扣杂（吨）</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="impurityWeight" v-model="impurityWeight" disabled />
                            </div>
                        </div>
                        <div class="form-group has-warning">
                            <label for="netWeight" class="col-sm-3 control-label form-label">净重（吨）</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="netWeight" v-model="netWeight" disabled />
                            </div>
                        </div>
                        <div class="form-group has-warning">
                            <label for="isDelivered" class="col-sm-3 control-label form-label">是否送到</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="isDelivered" :value="isDelivered?'是':'否'" disabled />
                            </div>
                        </div>
                        <!--是送到需要填写 客户净重（吨）-->
                        <div :class="clazz.customerNetWeightClazz" v-if="isDelivered">
                            <label for="customerNetWeight" class="col-sm-3 control-label form-label">客户净重（吨）</label>
                            <div class="col-sm-8">
                                <input @change="changeNetWeight($event)" type="number" class="form-control" id="customerNetWeight" v-model="customerNetWeight" :disabled="status===2" />
                            </div>
                        </div>
                        <!--是送到 能改销售价格-->
                        <div :class="clazz.sellPriceClazz">
                            <label for="sellPrice" class="col-sm-3 control-label form-label">销售价格（元）</label>
                            <div class="col-sm-8">
                                <input @change="changeSellPrice($event)" type="number" class="form-control" id="sellPrice" v-model="sellPrice" :disabled="!isDelivered||status===2" />
                            </div>
                        </div>
                        <div :class="clazz.deductionMoneyClazz">
                            <label for="deductionMoney" class="col-sm-3 control-label form-label">其它扣款（元）</label>
                            <div class="col-sm-8">
                                <input @change="changeDeductionMoney($event)" type="number" class="form-control" id="deductionMoney" v-model="deductionMoney" :disabled="!isDelivered||status===2" />
                                <span id="helpBlock" class="help-block">*会在付款金额中扣除*</span>
                            </div>
                        </div>
                        <!--是送到 付款金额=销售价格*客户净重-->
                        <div class="form-group has-warning">
                            <label for="paymentAmount" class="col-sm-3 control-label form-label">付款金额（元）</label>
                            <div class="col-sm-8">
                                <input type="number" class="form-control" id="paymentAmount" v-model="paymentAmount" disabled />
                            </div>
                        </div>
                        <div :class="clazz.freightCostsClazz" v-if="isDelivered">
                            <label for="freightCosts" class="col-sm-3 control-label form-label">运费（元）</label>
                            <div class="col-sm-8">
                                <input @change="changeFreightCosts($event)" type="number" class="form-control" id="freightCosts" v-model="freightCosts" :disabled="status===2" />
                            </div>
                        </div>
                        <div class="form-group has-warning">
                            <label for="totalAmount" class="col-sm-3 control-label form-label">合计（元）</label>
                            <div class="col-sm-8">
                                <input type="number" class="form-control" id="totalAmount" v-model="totalAmount" disabled />
                            </div>
                        </div>
                        <!--实际价格=合计/净重-->
                        <div class="form-group has-warning">
                            <label for="sellAveragePrice" class="col-sm-3 control-label form-label">实际价格（元）</label>
                            <div class="col-sm-8">
                                <input type="number" class="form-control" id="sellAveragePrice" v-model="sellAveragePrice" disabled />
                            </div>
                        </div>
                        <div :class="clazz.remark2Clazz">
                            <label for="remark2" class="col-sm-3 control-label form-label">备注</label>
                            <div class="col-sm-8">
                                <input @change="initClazz($event)" type="text" class="form-control" id="remark2" v-model="remark2" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="isHandwork" class="col-sm-3 control-label form-label">是否手工补单</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="isHandwork" :value="isHandwork?'是':'否'" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="weighmanName" class="col-sm-3 control-label form-label">过磅员</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="weighmanName" v-model="weighmanName" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="chargemanName" class="col-sm-3 control-label form-label">质检员</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="chargemanName" v-model="chargemanName" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="salesmanName" class="col-sm-3 control-label form-label">业务员</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="salesmanName" v-model="salesmanName" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark1" class="col-sm-3 control-label form-label">过磅员备注</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="remark1" v-model="remark1" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="status" class="col-sm-3 control-label form-label">状态</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="status" :value="getStatus()" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="enterTime" class="col-sm-3 control-label form-label">进厂时间</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="enterTime" v-model="enterTime" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="outTime" class="col-sm-3 control-label form-label">出厂时间</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="outTime" v-model="outTime" disabled />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Row -->
            </div>
            <div class="modal-footer" style="margin-top: 0px">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button v-if="status!==2" id="saveBtn" @click="saveInfo()" type="button" class="btn btn-default">确认完成</button>
            </div>
        </div>
    </div>
</div>
<!-- End Moda Code -->

<script>
    $(function() {
        var defOrder = [11, 'desc']; //默认排序列 mark一下，要记得改
        var _table = $('#myTable').DataTable({
            dom: '<"top"Blf<"clear">>rt<"bottom"ip<"clear">>',
            // dom: 'Bfrtip',
            lengthMenu: [10, 25, 50, 75, 100],
            pageLength: 10,
            language: dtlanguage,//中文
            select: false,
            ordering: true,
            order: [defOrder],//表示初期第n列降序排序，使用thymeleaf一定要把双中括号分开写
            processing: true,
            serverSide: true,
            ajax: {
                url: '/service/eSell/queryPage',
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                dataType: 'json',
                // 传给服务器的数据，可以添加我们自己的查询参数
                data: function (param) {
                    var orderBy = '';
                    if (param.order != null && param.order.length > 0) {
                        param.order.forEach((o, i) => {
                            orderBy += param.columns[o.column].data + " " + o.dir + ",";
                        });
                        orderBy = orderBy.substring(0, orderBy.length - 1);
                    }
                    var data = {
                        draw: param.draw,
                        search: param.search.value,
                        limit: param.length,
                        offset: param.start,
                        orderBy: orderBy
                    }
                    //当请求需要传递JSON数据格式的参数时，前台应该在JS中使用JSON.stringify()方法，将JSON数据转换成String类型
                    return JSON.stringify(data);
                },
                //预先处理服务器端返回的数据，修改成DT能用格式 draw、recordsTotal、recordsFiltered、data。
                dataFilter: function (text, type) {
                    if (!isEmpty(text)) {
                        var json = JSON.parse(text);//字符串转json
                        if (json.success) {
                            var qbean = json.data;
                            var data = {
                                draw: json.code,
                                recordsTotal: qbean.total,
                                recordsFiltered: qbean.total,
                                data: qbean.list
                            }
                            text = JSON.stringify(data);//json转字符串
                        }else{
                            spop(json.message, 'error');
                        }
                    }
                    return text;//返回字符串
                },
                //用于处理服务器端返回的数据。 dataSrc是DataTable特有的
                dataSrc: function (data) {
                    if (data.data == null) {
                        return '';
                    } else {
                        return data.data;
                    }
                }
            },
            buttons:[],
            rowId: 'sellId',
            columns: [
                {
                    data: 'sellNumber',
                    title: '码单号',
                    defaultContent: '--',
                    orderable: true,
                    render:function (data, type, row, meta) {
                        if(row.status==0)
                            return '<p class="del">'+data+'</p>';
                        else
                            return data;
                    }
                },{
                    data: 'sellGoodsName',
                    title: '物品',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'customerName',
                    title: '客户',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'warehouseName',
                    title: '仓库',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'licensePlate',
                    title: '车牌号',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'grossWeight',
                    title: '毛重(吨)',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'tareWeight',
                    title: '皮重(吨)',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'impurityWeight',
                    title: '扣杂(吨)',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'netWeight',
                    title: '净重(吨)',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'weighmanName',
                    title: '过磅员',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'status',
                    title: '状态',
                    defaultContent: '--',
                    orderable: true,
                    render:function (data, type, row, meta) {
                        switch (data) {
                            case 0: return '作废'
                            case 1: return '过磅完成'
                            case 2: return '确认完成'
                        }
                    }
                },{
                    data: 'enterTime',
                    title: '进厂时间',
                    defaultContent: '--',
                    orderable: true,
                    render: shotContent
                }
            ],
            columnDefs: [
                {
                    targets: 12,//最后一列 从0开始  mark一下，要记得改
                    title: '操作',
                    orderable: false,
                    render: function (data, type, row, meta) {
                        return [
                            '<button type="button" class="edit-btn btn btn-info btn-icon" data-rowid="' + row.sellId + '"><i class="fa fa-edit"></i></button>'
                        ].join('');
                    }
                }
            ]
        });

        //方法
        var methods = {
            initClazz:function(event){
                var id = event.target.id;
                if(this.clazz[id+'Clazz']!=='form-group has-warning'){
                    this.$set(this.clazz, id+'Clazz', 'form-group has-warning');
                }
            },
            //初始化表单
            initData:function () {
                this.$set(this.clazz,'customerNetWeightClazz','form-group has-warning');
                this.$set(this.clazz,'sellPriceClazz','form-group has-warning');
                this.$set(this.clazz,'freightCostsClazz','form-group has-warning');
                this.$set(this.clazz,'deductionMoneyClazz','form-group has-warning');
                this.$set(this.clazz,'remark2Clazz','form-group has-warning');
                this.$set(this,'sellId',null);
                this.$set(this,'sellNumber',null);
                this.$set(this,'sellGoodsName',null);
                this.$set(this,'customerName',null);
                this.$set(this,'customerPhone',null);
                this.$set(this,'warehouseName',null);
                this.$set(this,'licensePlate',null);
                this.$set(this,'grossWeight',null);
                this.$set(this,'tareWeight',null);
                this.$set(this,'impurityWeight',null);
                this.$set(this,'netWeight',null);
                this.$set(this,'isHandwork',null);
                this.$set(this,'weighmanName',null);
                this.$set(this,'chargemanName',null);
                this.$set(this,'salesmanName',null);
                this.$set(this,'isDelivered',null);
                this.$set(this,'customerNetWeight',null);
                this.$set(this,'sellPrice',null);
                this.$set(this,'deductionMoney',null);
                this.$set(this,'paymentAmount',null);
                this.$set(this,'freightCosts',null);
                this.$set(this,'totalAmount',null);
                this.$set(this,'sellAveragePrice',null);
                this.$set(this,'remark1',null);
                this.$set(this,'remark2',null);
                this.$set(this,'status',null);
                this.$set(this,'enterTime',null);
                this.$set(this,'outTime',null);
            },
            //获取状态
            getStatus:function () {
                switch (this.status) {
                    case 0: return '作废'
                    case 1: return '过磅完成'
                    case 2: return '确认完成'
                }
            },
            //修改了客户净重
            changeNetWeight:function(event){
                initClazz(event);
                var cnw = parseNumber(event.target.value);
                this.$set(this,'paymentAmount',cnw*parseNumber(this.sellPrice)-parseNumber(this.deductionMoney));
                this.$set(this,'totalAmount',parseNumber(this.paymentAmount)+parseNumber(this.freightCosts));
                this.$set(this,'sellAveragePrice',(parseNumber(this.totalAmount)/parseNumber(this.netWeight)).toFixed(2));
            },
            //修改销售价格
            changeSellPrice:function(event){
                initClazz(event);
                var cbp = parseNumber(event.target.value);
                this.$set(this,'paymentAmount',cbp*parseNumber(this.customerNetWeight)-parseNumber(this.deductionMoney));
                this.$set(this,'totalAmount',parseNumber(this.paymentAmount)+parseNumber(this.freightCosts));
                this.$set(this,'sellAveragePrice',(parseNumber(this.totalAmount)/parseNumber(this.netWeight)).toFixed(2));
            },
            //修改了其它扣款
            changeDeductionMoney:function(event){
                initClazz(event);
                var cdm = parseNumber(event.target.value);
                this.$set(this,'paymentAmount',parseNumber(this.sellPrice)*parseNumber(this.customerNetWeight)-cdm);
                this.$set(this,'totalAmount',parseNumber(this.paymentAmount)+parseNumber(this.freightCosts));
                this.$set(this,'sellAveragePrice',(parseNumber(this.totalAmount)/parseNumber(this.netWeight)).toFixed(2));
            },
            //修改了运费
            changeFreightCosts:function(event){
                initClazz(event);
                var cfc = parseNumber(event.target.value);
                this.$set(this,'totalAmount',cfc+parseNumber(this.paymentAmount));
                this.$set(this,'sellAveragePrice',(parseNumber(this.totalAmount)/parseNumber(this.netWeight)).toFixed(2));
            },
            //确认完成
            saveInfo:function () {
                if(this.isDelivered){//表示送到
                    if(isEmpty(this.customerNetWeight)){
                        spop('请填写客户那边的净重', 'error');
                        this.$set(this.clazz,'customerNetWeightClazz','form-group has-error');
                        return;
                    }

                    if(isEmpty(this.sellPrice)){
                        spop('请填写销售价格', 'error');
                        this.$set(this.clazz,'sellPriceClazz','form-group has-error');
                        return;
                    }

                    if(isEmpty(this.freightCosts)){
                        spop('请填写运费', 'error');
                        this.$set(this.clazz,'freightCostsClazz','form-group has-error');
                        return;
                    }

                    if(!isEmpty(this.deductionMoney) && isEmpty(this.remark2)){
                        spop('填写了其它扣款之后，需要填写备注', 'error');
                        this.$set(this.clazz,'remark2Clazz','form-group has-error');
                        return;
                    }
                }

                var _this = this;
                post('/service/eSell/confirmCompletion',function (result) {
                    if(result.success){
                        spop({
                            template: '保存成功',
                            autoclose: 5000,
                            style:'success'
                        });
                        $('#myModal').modal('hide');
                    }else{
                        spop(result.message,'error');
                    }
                },{
                    sellId:_this.sellId,
                    customerNetWeight:_this.customerNetWeight,
                    sellPrice:_this.sellPrice,
                    freightCosts:_this.freightCosts,
                    deductionMoney:_this.deductionMoney,
                    remark2: _this.remark2
                });
            }
        };

        //表单vue
        var myFormApp = new Vue({
            el:'#myModal',
            //属性
            data:{
                clazz:{
                    customerNetWeightClazz:'form-group has-warning',
                    sellPriceClazz:'form-group has-warning',
                    freightCostsClazz:'form-group has-warning',
                    deductionMoneyClazz:'form-group has-warning',
                    remark2Clazz:'form-group has-warning'
                },
                sellId:null,
                sellNumber:null,
                sellGoodsName:null,
                customerName:null,
                customerPhone:null,
                warehouseName:null,
                licensePlate:null,
                grossWeight:null,
                tareWeight:null,
                impurityWeight:null,
                netWeight:null,
                isHandwork:null,
                weighmanName:null,
                chargemanName:null,
                salesmanName:null,
                isDelivered:null,
                customerNetWeight:null,
                sellPrice:null,
                deductionMoney:null,
                paymentAmount:null,
                freightCosts:null,
                totalAmount:null,
                sellAveragePrice:null,
                remark1:null,
                remark2:null,
                status:null,
                enterTime:null,
                outTime:null
            },
            methods: methods,
            mounted:function () {},
            updated: function () {}
        });

        //编辑
        $('#myTable tbody').on('click', 'button.edit-btn', function () {
            myFormApp.initData();//清空表单
            var rowid = $(this).data('rowid');
            get('/service/eSell/getOne',function (result) {
                if(result.success){
                    var record = result.data;
                    Vue.set(myFormApp,'sellId',record.sellId);
                    Vue.set(myFormApp,'sellNumber',record.sellNumber);
                    Vue.set(myFormApp,'sellGoodsName',record.sellGoodsName);
                    Vue.set(myFormApp,'customerName',record.customerPhone);
                    Vue.set(myFormApp,'customerPhone',record.customerPhone);
                    Vue.set(myFormApp,'warehouseName',record.warehouseName);
                    Vue.set(myFormApp,'licensePlate',record.licensePlate);
                    Vue.set(myFormApp,'grossWeight',record.grossWeight);
                    Vue.set(myFormApp,'tareWeight',record.tareWeight);
                    Vue.set(myFormApp,'impurityWeight',record.impurityWeight);
                    Vue.set(myFormApp,'netWeight',record.netWeight);
                    Vue.set(myFormApp,'isHandwork',record.isHandwork);
                    Vue.set(myFormApp,'weighmanName',record.weighmanName);
                    Vue.set(myFormApp,'chargemanName',record.chargemanName);
                    Vue.set(myFormApp,'salesmanName',record.salesmanName);
                    Vue.set(myFormApp,'isDelivered',record.isDelivered);
                    Vue.set(myFormApp,'customerNetWeight',record.customerNetWeight);
                    Vue.set(myFormApp,'sellPrice',record.sellPrice);
                    Vue.set(myFormApp,'deductionMoney',record.deductionMoney);
                    Vue.set(myFormApp,'paymentAmount',record.paymentAmount);
                    Vue.set(myFormApp,'freightCosts',record.freightCosts);
                    Vue.set(myFormApp,'totalAmount',record.totalAmount);
                    Vue.set(myFormApp,'sellAveragePrice',record.sellAveragePrice);
                    Vue.set(myFormApp,'remark1',record.remark1);
                    Vue.set(myFormApp,'remark2',record.remark2);
                    Vue.set(myFormApp,'status',record.status);
                    Vue.set(myFormApp,'enterTime',record.enterTime);
                    Vue.set(myFormApp,'outTime',record.outTime);
                }else {
                    spop(result.message,'error')
                }
            },{
                sellId: rowid
            });
            $('#myModal').modal('show');
        });

    });
</script>
</body>
</html>